<template>
  <!-- 项目管理 -->
  <div>
    <div>
      <search-form
        ref="searchBar"
        :search-config="searchConfig"
        :label-width="120"
        @clear="clearSearch"
        @search="handleSearch"
      />
    </div>
    <table-box
      ref="ProjectManagement"
      :selected-arry.sync="tableSelected"
      :table-config="tableConfig"
      :other-filters="otherFilters"
      :other-raw="otherRaw"
      :off-set="-20"
      show-index
      @btnOperate="btnOperate"
      @data-change="dataChange"
    />
  </div>
</template>

<script>
import { getDictByPatchType } from '@/api/dataDict'
import { getAreaData } from '@/views/productConfig/task/components/index'
export default {
  name: 'ProjectManagement',
  data() {
    return {
      areaList: [],
      searchConfig: [
        {
          label: '施工单位名称',
          prop: 'unitCode',
          type: 'dialog',
          value: '',
          placeholder: '',
          config: {
            requestMethod: 'post',
            remoteUrl: `${process.env.VUE_APP_BASE_API}/api/v1/configConstUnit/page`,
            paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'unitName',
              value: 'unitCode'
            },
            selectData: []
          },
          dialogConfig: {
            title: '选择表格数据',
            interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/configConstUnit/page`,
            setting: [{ prop: 'unitCode', title: '编码' }, { prop: 'unitName', title: '名称' }],
            pageFlag: true
          }
        },
        { label: '施工单位负责人', prop: 'principal', type: 'text', value: '', placeholder: '' },
        {
          label: '门店',
          prop: 'shopCode',
          type: 'dialog',
          value: '',
          placeholder: '',
          config: {
            requestMethod: 'post',
            remoteUrl: `/select-service/api/v1/shop/page`,
            paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'name',
              value: 'code'
            },
            selectData: []
          },
          dialogConfig: {
            title: '选择表格数据',
            interfacePath: `/select-service/api/v1/shop/page`,
            setting: [{ prop: 'code', title: '编码' }, { prop: 'name', title: '名称' }],
            pageFlag: true
          }
        },
        { label: '门店建设项目号', prop: 'constCode', type: 'text', value: '', placeholder: '' },
        { label: '装修任务', prop: 'decorationTaskCode', type: 'text', value: '', placeholder: '' },
        { label: '装修完工时间', prop: 'actualEndTime', type: 'date', value: '', placeholder: '' }
      ],
      belongRegionList: [],
      tableSelected: [],
      otherFilters: [],
      otherRaw: {},
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/configConstUnit/project/page`,
        hideFuncBar: true,
        setting: [
          {
            prop: 'unitCode',
            label: '施工单位编码',
            width: '130'
          },
          {
            prop: 'unitName',
            label: '施工单位名称',
            width: '130'
          },
          {
            prop: 'principal',
            label: '施工单位负责人',
            width: '130'
          },
          {
            prop: 'decorationTaskCode',
            label: '装修任务',
            className: 'table-handelclick-text',
            isButton: true,
            clickFun: this.toDecorationDetail,
            width: '130'
          },
          {
            prop: 'constCode',
            label: '门店建设项目号',
            width: '140'
          },
          {
            prop: 'shopName',
            label: '门店',
            width: '130'
          },
          {
            prop: 'shopDecorationArea',
            label: '卖场装修区域',
            width: '130',
            render: (creat, row) => {
              if (!row.shopDecorationArea) {
                return
              }
              let list = []
              if (typeof (row.shopDecorationArea) === 'string') {
                list = row.shopDecorationArea.split(',')
              } else {
                list = row.shopDecorationArea
              }
              const arr = []
              this.areaList.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'shopDecorationTotalArea',
            label: '卖场装修面积',
            width: '130'
          },
          {
            prop: 'expectDecorationTime',
            label: '预计进场时间',
            width: '130'
          },
          {
            prop: 'actualApproachTime',
            label: '实际进场时间',
            width: '130'
          },
          {
            prop: 'expectEndTime',
            label: '预计完工时间',
            width: '130'
          },
          {
            prop: 'actualEndTime',
            label: '实际完工时间',
            width: '130'
          },
          {
            prop: 'schedule',
            label: '项目进度',
            width: '130',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'DECORATION_SCHEDULE'
            }
          }
        ]
      }
    }
  },
  async created() {
    await this.getDictByPatchTypeAll(['BELONG_REGION']).then(res => {
      this.belongRegionList = res.BELONG_REGION
    })
    this.areaList = await getAreaData()
  },
  activated() {},
  methods: {
    // 获取数据字典
    async getDictByPatchTypeAll(data) {
      const obj = await getDictByPatchType(data)
        .then(res => {
          return res
        })
      return obj
    },
    handleSearch(data) {
      const arr = JSON.parse(JSON.stringify(data.filtersRaw))
      if (data && data.filtersRaw) {
        data.filtersRaw.forEach(item => {
          if (item.property === 'shopCode') {
            this.otherRaw = { 'shopCode': item.value }
          }
        })
        const index = arr.findIndex(item => item.property === 'shopCode')
        if (index !== -1) {
          arr.splice(index, 1)
        }
      }
      this.otherFilters = [...arr]
      this.$nextTick(() => {
        this.$refs.ProjectManagement.initTableData()
      })
    },
    clearSearch() {
      this.otherFilters = []
      this.otherRaw = {}
    },
    toDecorationDetail(row) {
      this.$router.push({ name: 'DecorateDetail', query: { id: row.decorationId, taskCode: row.decorationTaskCode, type: 'projectManege' }})
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.table-handelclick-text {
  color: #3DC094;
  cursor: pointer;
}
</style>
